<template>
  <Drawer
    title="权限分配"
    :width="260"
    :mask="false"
    :closable="true"
    :draggable="true"
    placement="left"
    :value="value"
    @input="$emit('input', $event)"
  >
    <div style="height:inherit; overflow:auto; margin-bottom:10px">
      <Tree ref="tree" :data="data" show-checkbox></Tree>
    </div>
    <Button type="primary" @click="getCheckedPopedoms" long>提交</Button>
  </Drawer>
</template>
<script>
import { popedomListByRoleId } from "@/api/role";
import { MyTreeTools } from "@/libs/util";

export default {
  name: "DrawerPage",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    roleId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      data: []
    };
  },
  methods: {
    getPopedomListByRoleId(roleId) {
      if (roleId) {
        popedomListByRoleId({ id: roleId }).then(res => {
          this.data = new MyTreeTools().toTreeData(res, function(node) {
            node.oldChecked = node.checked
            node.title = node.text;
            node.expand = true;
            if (node.checked === "false" || node.TYPE === 1) {
              node.checked = false;
            } else {
              node.checked = true;
            }
          });
          //当菜单为根节点也被选中时
          for (var i = 0; i < this.data.length; i++) {
            if (this.data[i].children.length == 0 && this.data[i].oldChecked == "true") {
              this.data[i].checked = true;
            }
          }
        });
      }
    },
    getCheckedPopedoms() {
      //获取权限ids
      let popedoms = this.$refs.tree.getCheckedAndIndeterminateNodes();
      let popedomIds = "";
      for (let i = 0; i < popedoms.length; i++) {
        popedomIds += popedoms[i].id + ",";
      }
      this.$emit("on-save-popedoms", popedomIds);
    }
  },
  watch: {
    roleId: function(val) {
      this.getPopedomListByRoleId(val);
    }
  },
  mounted() {
    this.getPopedomListByRoleId(this.roleId);
  }
};
</script>